<template>
  <view>
    <!-- 搜索框 -->
    <input type="text" v-model="searchText" placeholder="搜索好友" style="width: 90%; margin: auto;" />
    <!-- 字母表 -->
    <view class="letter-list">
      <view
        v-for="(item, index) in letters"
        :key="index"
        @click="scrollToLetter(item)"
      >
        {{ item }}
      </view>
    </view>
    <!-- 好友列表 -->
    <view class="friend-list">
      <view class="item" v-for="(friend , index) in filteredFriends" :key="index">
		  <image :src=friend.Image mode=""></image>
        <view class="text-name">
			<P>{{friend.renname}}</P>
			<p class="p-one">我喜欢你像风走了八千里</p>
			<!-- <text>我喜欢你像风走了八千里</text> -->
			</view>
      </view>
    </view>
  </view>
  <!-- <image src="../../../static/icon/name.jpg" mode=""></image> -->
</template>
<script>
export default {
  data() {
    return {
      friends: [
        {  name: 'A'  , renname:"小意" , Image:"../../../static/icon/name.jpg"},
		{  name: 'B'  , renname:"小若" , Image:"../../../static/icon/nameone.jpg"},
		// {  name: 'A'  , renname:"小意" , Image:"../../../static/icon/name.jpg"},
		// {  name: 'A'  , renname:"小意" , Image:"../../../static/icon/name.jpg"},
  //       {  name: 'B' },
  //       {  name: 'C' },
        // 其他好友数据
      ],
      letters: [], // 字母表数据
      searchText: '', // 搜索关键字
    };
  },
  computed: {
    // 过滤后的好友列表
    filteredFriends() {
      if (!this.searchText) {
        return this.friends;
      }
      return this.friends.filter((friend) =>
        friend.name.includes(this.searchText)
      );
    },
  },
  methods: {
    // 滚动到指定字母
    scrollToLetter(letter) {
      const query = uni.createSelectorQuery();
      query
        .select(`#letter-${letter}`)
        .boundingClientRect((rect) => {
          uni.pageScrollTo({
            scrollTop: rect.top + uni.getSystemInfoSync().statusBarHeight,
            duration: 300,
          });
        })
        .exec();
    },
    // 初始化字母表数据
    initLetters() {
      const letters = [];
      this.friends.forEach((friend) => {
        const firstLetter = friend.name.charAt(0).toUpperCase();
        if (!letters.includes(firstLetter)) {
          letters.push(firstLetter);
        }
      });
      this.letters = letters.sort();
    },
  },
  mounted() {
    this.initLetters();
  },
};
</script>
<style lang="scss" scoped>
.letter-list {
  position: fixed;
  top: 100px;
  right: 0;
  bottom: 0;
  width: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.letter-list view {
  font-size: 12px;
  margin: 4px 0;
}
.friend-list {
  margin-top: 120px;
}
.friend-list  {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}

.item{
	width: 90%;
	margin: 10px 0px;
	padding: 10px 0px;
	display: flex;
	align-items: center;
	// background-color: aqua;
	
	.text-name{
		font-size: 32rpx;
		margin: 0px 20px;
		line-height: 30px;
		.p-one{
			font-size: 24rpx;
		}
	}
	
	image{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
}


.friend-list .item:last-child {
  border-bottom: none;
}
</style>